CC Documentation sur l'intégration de Google
Documentation complète pour le plug-in cc_google_integrationTable des matières
1. Introduction
2. installation
3. Activation de la licence
4 Configuration de base
5. le suivi des événements liés au commerce électronique
6 Intégration avec Google Ads
7. mode débogage
8. code JavaScript personnalisé
9 Dépannage
10. LA FAQ
1. Introduction
CC Google Integration est un plug-in professionnel pour WooCommerce qui permet une intégration complète de votre boutique en ligne avec Google Analytics 4, Google Tag Manager et Google Ads. Il permet de suivre automatiquement le comportement des utilisateurs et les événements liés au commerce électronique, ce qui est essentiel pour optimiser les processus de vente et de marketing.Le plug-in permet un contrôle total sur :
- Intégration avec Google Analytics 4 (GA4)
- Intégration avec Google Tag Manager (GTM)
- Configuration des conversions Google Ads
- le suivi des événements liés au commerce électronique
- code JavaScript personnalisé
2. installation
Exigences du système- WordPress 5.0 ou supérieur
- WooCommerce 3.0 ou plus récent
- PHP 7.0 ou plus récent
- Téléchargez le fichier ZIP du plug-in à partir de la boutique officielle
- Se connecter au panneau d'administration de WordPress
- Aller à : Plug-ins > Ajouter un nouveau plug-in > Envoyer un plug-in
- Sélectionnez le fichier ZIP téléchargé et cliquez sur "Installer maintenant"
- Une fois l'installation terminée, cliquez sur "Activer le plug-in"
3. Activation de la licence
Il est nécessaire d'activer la licence avant d'utiliser le plug-in :Après l'installation, rendez-vous sur : COCOS. > Licence cc_google_integration
Saisir la clé de licence reçue après l'achat
Cliquez sur "Activer la licence"
Une fois l'activation réussie, un message de confirmation s'affiche
Conseil
Sans licence active, le plug-in fonctionnera en mode prévisualisation sans possibilité de modifier les paramètres.
4 Configuration de base
Pour configurer les paramètres de base du plug-in :- Aller à : Paramètres > Intégration Google
- Configurez les options suivantes :
Saisissez l'identifiant de mesure de Google Analytics 4 (format : G-XXXXXXXXXX). Vous pouvez le trouver dans l'interface Google Analytics sous Administration > Paramètres des services > Collecte et modification des données > Flux de données > flux sélectionné > ID de mesure.
ID du conteneur GTM
Saisissez l'ID du conteneur Google Tag Manager (format : GTM-XXXXXXX). Vous le trouverez dans l'interface de Google Tag Manager.
ID des annonces Google
Saisissez l'identifiant principal de la balise Google Ads (format : AW-XXXXXXXXX). Vous le trouverez dans l'interface Google Ads sous Outils > Balises de site.
5. le suivi des événements liés au commerce électronique
Dans cette section, vous pouvez activer et configurer le suivi des événements de commerce électronique :Activer le suivi du commerce électronique
Activez cette option pour activer le suivi des événements d'achat de Google Analytics 4.
Événements à suivre
Choisissez les événements de commerce électronique que vous souhaitez suivre dans votre boutique :
- Affichage de la liste des produits (view_item_list) - enregistre l'affichage d'une liste de produits dans une boutique
- Présentation d'un seul produit (view_item) - enregistre l'affichage de la page du produit
- Ajouter au panier (add_to_cart) - enregistre l'ajout d'un produit au panier
- Début du contrat (begin_checkout) - enregistre le début du processus de commande
- Achat (achat) - enregistre les transactions achevées
- Recherche (recherche) - enregistre les requêtes de recherche sur la page du magasin
- Enregistrement de l'utilisateur (sign_up) - enregistre l'inscription d'un nouvel utilisateur
- Connexion de l'utilisateur (login) - enregistre le login d'un utilisateur existant
Saisissez les classes CSS des boutons que vous souhaitez suivre. Vous pouvez séparer plusieurs classes par des virgules. Les classes de boutons par défaut dans WooCommerce sont :
- .add-to-cart
- .add_to_cart_button
- .ajax_add_to_cart
- .single_add_to_cart_button
- .single_add_to_cart_ajax_button
Conseil
Le plug-in détecte automatiquement les classes du bouton "Ajouter au panier", mais il est toujours utile de les vérifier manuellement à l'aide des outils de développement du navigateur (F12).
6 Intégration avec Google Ads
Pour mettre en place le suivi des conversions de Google Ads, configurez les champs suivants :Étiquettes de conversion
Saisissez les étiquettes de conversion Google Ads pour les événements individuels. L'étiquette est la partie qui suit le "/" dans l'identifiant de conversion complet. Par exemple, si l'identifiant de conversion est "AW-123456789/AbCdEfGhIj", entrez "AbCdEfGhIj" dans le champ approprié.
Étiquettes de conversion disponibles :
- Etiquette de conversion "affichage du produit" - pour l'événement view_item
- Etiquette de conversion "ajouter au panier" - pour l'événement add_to_cart
- Etiquette de conversion "début de l'ordre" - pour l'événement begin_checkout
- Étiquette de conversion "achat" - pour l'achat de l'événement
- Etiquette de conversion "search" - pour l'événement de recherche
- Etiquette de conversion "enregistrement de l'utilisateur" - pour l'événement sign_up
- Etiquette de conversion "user login" - pour la connexion à l'événement
Important
Pour Google Ads, il est nécessaire de créer les cibles et les conversions vous-même dans votre compte Google Ads. Une fois les étiquettes de conversion obtenues, elles doivent être introduites dans la configuration du plug-in.
7. mode débogage
Le plug-in propose un mode de débogage qui permet de vérifier que l'intégration fonctionne correctement :Activer le mode débogage
Cochez cette option pour activer le mode de débogage. Des informations détaillées sur les événements GA4 et des messages de diagnostic seront alors affichés dans la console JavaScript.
Conseil
Pour ouvrir la console de développement dans votre navigateur, appuyez sur F12 ou Ctrl + Shift + I (Windows/Linux) ou Cmd + Option + I (Mac), puis allez dans l'onglet "Console".
Pour vous assurer que tout fonctionne correctement, vous pouvez utiliser l'outil officiel de Google, Tag Assistant. Il vous permet de vérifier que les balises sont correctement implémentées et que les données sont transférées correctement.
8. code JavaScript personnalisé
Le plug-in vous permet d'ajouter votre propre code JavaScript, qui sera exécuté sur toutes les pages de la boutique :Inclure votre propre code
Cochez cette option pour activer l'exécution de votre propre code JavaScript.
Code JavaScript personnalisé
Dans ce champ, vous pouvez saisir un code JavaScript personnalisé qui sera exécuté sur toutes les pages. Vous pouvez ajouter vos propres événements pour GA4 ou GTM ici.
Exemple de code d'événement personnalisé :
document.addEventListener("DOMContentLoaded", function() {
// Assurez-vous que le dataLayer existe
window.dataLayer = window.dataLayer || [] ;
// Exemple d'envoi d'un événement simple lors du chargement de la page
dataLayer.push({
"event" : "custom_event",
"custom_parameter" : "value",
"timestamp" : new Date().toISOString()
}) ;
console.log("L'événement personnalisé a été envoyé à la couche de données") ;
// Facultatif : exemple d'événement de clic sur un bouton
// Vérifier si l'élément existe avant d'ajouter l'écouteur
const button = document.querySelector("#moj-button") ;
if (button) {
button.addEventListener("click", function() {
dataLayer.push({
"event" : "button_click",
"button_id" : "mon-bouton",
"button_text" : this.textContent
}) ;
console.log("L'événement de clic sur le bouton a été envoyé au dataLayer" ;)
}) ;
}
}) ;
9 Dépannage
Les balises ne sont pas visibles dans les outils Google- Vérifiez que les identifiants GA4, GTM et Google Ads sont correctement saisis.
- S'assurer que la licence est active
- Vider le cache du navigateur et vérifier à nouveau
- Utiliser le mode débogage pour afficher les messages dans la console JavaScript
- Utiliser Google Tag Assistant pour vérifier les balises
- Assurez-vous que les événements pertinents sont activés dans la configuration du plug-in.
- Vérifiez que les classes du bouton personnalisé "Ajouter au panier" sont correctement définies.
- Vérifier qu'il n'y a pas de conflit avec d'autres plug-ins
- Vérifier que le JavaScript de la page fonctionne correctement (pas d'erreur dans la console)
- Vérifiez que l'identifiant principal de Google Ads est correct
- S'assurer que les étiquettes de conversion sont correctement configurées
- Vérifier que les conversions sont correctement configurées dans le panneau Google Ads
10. LA FAQ
Le plug-in fonctionne-t-il avec les dernières versions de WooCommerce ?Oui, CC Google Integration est compatible avec les dernières versions de WooCommerce et mis à jour régulièrement pour assurer la compatibilité.
Ai-je besoin de comptes séparés pour GA4, GTM et Google Ads ?
Oui, pour tirer le meilleur parti du plugin, il est recommandé d'avoir des comptes Google Analytics 4, Google Tag Manager et Google Ads. Chacun de ces outils a un rôle différent dans l'écosystème analytique.
Le plug-in affecte-t-il les performances du site ?
CC Google Integration a été conçu dans un souci de performance et a un impact minimal sur la vitesse de chargement des pages. Les scripts sont chargés de manière asynchrone, ce qui minimise l'impact sur les temps de chargement.
Puis-je suivre des événements personnalisés ?
Oui, grâce à l'option "Code JavaScript personnalisé", vous pouvez ajouter le suivi de tout événement personnalisé à Google Analytics 4 et à Google Tag Manager.
Le plug-in prend-il en charge les traductions ?
Oui, tous les textes des plugins peuvent être traduits en utilisant les outils standards de WordPress tels que Loco Translate ou WPML.
À quelle fréquence le plug-in est-il mis à jour ?
Le plugin est régulièrement mis à jour pour assurer la compatibilité avec les dernières versions de WordPress, WooCommerce et les services Google.
Que faire si j'ai besoin d'aide ?
Une assistance technique est disponible après l'achat de la licence. Contactez-nous par page de soutien.
